<template>
  <h1>EL-走马灯组件</h1>
  <!--
    trigger="" 此属性有两个属性值
    hover: 当不设置此属性时 默认为此属性值 表示当鼠标悬停在指示灯上 图片便会切换至指示灯所指的图片
    click: 此属性值表示鼠标点击指定指示灯时 图片才会切换

    指示灯: 轮播图组件图片主体下方的分割式条状灯条
  -->
  <el-carousel style="width: 380px;" trigger="hover">
    <el-carousel-item><img src="carousel1.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel2.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel3.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel4.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
  </el-carousel>

  <el-carousel style="width: 380px;" trigger="click">
    <el-carousel-item><img src="carousel1.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel2.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel3.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel4.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
  </el-carousel>
  <!--
    type="": 该属性只有一个属性值
    1.当不设置此属性时 默认主体位置以只显示一张图片的方式进行轮播
    2.card: 当设置此属性值时 主体位置会在显示主图片的同时 在该图片的后方两侧显示半透明状态的上一张图片和下一张图片

    注意 当使用该属性时 需要将轮播图组件的宽度放大 否则会造成上下层图片之间的挤压导致图片变形
   -->
  <el-carousel style="width: 800px;" type="card">
    <el-carousel-item><img src="carousel1.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel2.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel3.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel4.jpg" style="width: 100%;height: 100%;"></el-carousel-item>
  </el-carousel>
</template>

<script setup>

</script>

<style scoped>

</style>